<template>
  <div class="data-preview item-over" :class="style">
    <div class="data-preview-left">
      <p class="data-preview-left-num">{{options.num}}</p>
      <p class="data-preview-left-title">{{options.title}}</p>
      <p class="data-preview-left-time">{{options.time}}</p>
    </div>
    <div class="data-preview-right">
      <i :class="options.icon"></i>
    </div>
  </div>
</template>

<script>
  export default {
    props: ['options'],
    computed: {
      style() {
        if(this.options) return this.options.style || 'pre-blue';
        return 'pre-blue';
      },
    },
  }
</script>

<style lang="scss" scoped>
  /*********data-preview**********/
  .data-preview{
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 0 20px 0 20px;

    box-sizing: border-box;
    color: #fff;

    .data-preview-left{
      p{
        margin: 0;
        padding: 0;
      }

      .data-preview-left-num{
        font-size: 36px;
        line-height: 50px;
      }

      .data-preview-left-title{
        font-size: 18px;
        line-height: 25px;
      }

      .data-preview-left-time{
        font-size: 12px;
        line-height: 17px;
      }
    }

    .data-preview-right{
      position: absolute;
      right: 10px;

      i{
        font-size: 85px;
        opacity: .5;
        filter: alpha(opacity=50);
      }
    }
  }

  .pre-light-blue{
    background: linear-gradient(90deg, #1493FF, #00BEFF);
  }
  .pre-blue{
    background: linear-gradient(90deg, #127BFF, #127BFF);
  }
  .pre-light-green{
    background: linear-gradient(90deg, #13C751, #16E263);
  }
  .pre-pink{
    background: linear-gradient(90deg, #FF286A, #FFA2BF);
  }
  .pre-orange{
    background: linear-gradient(90deg, #FF9355, #F3D062);
  }
</style>
